import { size, formItemLayout, getUploadResult, getToken, uploadUrl,getVideo,getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import VideoUploads from '../../components/VideoUploads';
export interface IVideoEditProps extends FormComponentProps {
    visible: boolean,
    video?: api.SingleUserMallVideosVOVideoVO,
    onSave: (any) => void,
    onCancel: () => void,

}
class VideoEdit extends React.PureComponent<IVideoEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        responseList: [],
        content:'',
        videosList: [],
    }
    componentDidMount() {
        const video = this.props.video && this.props.video;
        this.setState({ videosList: getVideo(video)});
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['content'] = getVideo(this.state.videosList);
                this.props.onSave(form);
            }
        });
    }
   videoChange = (videosList) => {
        this.setState({ videosList });
    }
    onChange = (info) => {
        let currFileList = info.fileList;
        currFileList = currFileList.filter((f) => (!f.length));
        if (!!currFileList && currFileList.length != 0) {
            this.setState({ responseList: currFileList });
        }
        //读取远程路径并显示链接
        currFileList = currFileList.map((file) => {
            if (file.response) {
                getUploadResult(file.response, (video) => {
                    file.url = video;
                });
            }
            if (!file.length) {
                return file;
            }
        });
    }
    receiveHtml = (content) => {
        //清空responseList
        this.setState({ responseList: [], content });
    }
    beforeUpload(file) {
        console.log("beforeUpload like", file);
    }

    cancel = () => {
        this.props.onCancel();
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { video } = this.props;
        const uploadProps = {
            name: 'file',
            action: uploadUrl,
            headers: getToken(),
            onChange: this.onChange,
            listType: 'picture',
            fileList: this.state.responseList,
            data: (file) => {

            },
            multiple: true,
            beforeUpload: this.beforeUpload,
            showUploadList: true
        }
        const visible = this.props;
        return (
            <Modal
                style={{width:800}}
                title='视频信息'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form >
                    <Form.Item label="视频名称" {...formItemLayout} style={{right:40}} >
                        {getFieldDecorator('name', {
                            initialValue: video && video.name
                        })(<Input size={size}
                            placeholder="请输入视频名称" />)}
                    </Form.Item>
                    <Form.Item label="上传视频" {...formItemLayout} style={{width:700,right:100}} >
                        {
                            visible ? (
                                (<VideoUploads editable={true} fileList={this.state.videosList} onChange={this.videoChange} />)
                            ) : (undefined)
                        }
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(VideoEdit);